<template>
  <div>
    <!-- 首次未授权的 -->
    <div class="no-anth" v-if="currentType === 'ChangePassword'">
      <el-upload class="upload-Upgrade" ref="upload" drag :action="global + '/home/upload'" :on-success="handleAvatar" :on-error='handleAvatar' :before-upload="beforeAvatarUpload" accept='.lic' :on-change="handleChange" :headers='headerConfig' :multiple='false' :file-list="fileList" :on-remove='removeFile'>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">{{$t('将文件拖到此处，或')}}<em>{{$t('点击上传')}}</em></div>
        <div class="el-upload__tip" slot="tip">{{$t('只能上传 LIC 文件，且不超过1MB')}}</div>
      </el-upload>
    </div>
    <div v-else>
      <el-dialog :close-on-click-modal='false' v-drag :title="$t('上传授权文件')" v-if="dialogVisible" :visible.sync="dialogVisible" width="550px" top="5%" @close='close' class="licenceDialog">
        <div class="licenceDialogContent">
          <el-upload class="upload-Upgrade" ref="upload" drag :action="global + '/home/upload'" :on-success="handleAvatar" :on-error='handleAvatar' :before-upload="beforeAvatarUpload" accept='.lic' :on-change="handleChange" :headers='headerConfig' :multiple='false' :file-list="fileList" :on-remove='removeFile'>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">{{$t('将文件拖到此处，或')}}<em>{{$t('点击上传')}}</em></div>
            <div class="el-upload__tip" slot="tip">{{$t('只能上传 LIC 文件，且不超过1MB')}}</div>
          </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submit">{{$t('确 定')}}</el-button>
          <el-button @click="close">{{$t('取 消')}}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import global from '@/global'
import { getSessionId } from '@/utils/auth'
import { updateFile } from '@/api/home'
export default {
  name: 'uploadFile',
  props:{
    currentType:{
      type:String,
      default:'',
      required:false,
    }
  },
  data () {
    return {
      dialogVisible: false,
      fileList: [],
      headerConfig: {
        'session_id': getSessionId()
      },
      fileName: null,
      global: global.BASE_URL
    }
  },
  methods: {
    init () {
      this.dialogVisible = true
    },
    submit () {
      // this.$refs.upload.submit()
      if (this.fileName) {
        updateFile({ name: this.fileName }).then(res => {
          if (res.status === 0) {
            this.$messages.success(this.$t('更新成功'))
            this.$parent.listData()
            this.close()
          }
        })
      } else {
        this.$messages.error(this.$t('请选择文件上传'))
      }
    },
    handleAvatar (res, file) {
      if (res.status === 0) {
        this.fileName = res.dir
        // 如果是首次校验未授权
         if(this.currentType === 'ChangePassword') {
          this.submit();
        }
      } else {
        this.$messages.error(res.msg || this.$t('上传失败'))
      }
    },
    handleChange (file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    removeFile () {
      this.fileName = null
    },
    beforeAvatarUpload (file) {
      const isLIC = file.name.indexOf('.lic') >= 0
      const isLt1M = file.size / 1024 / 1024 < 1

      if (!isLIC) {
        this.$messages.error(this.$t('上传的文件只能是 LIC 格式!'))
      }
      if (!isLt1M) {
        this.$messages.error(this.$t('上传的文件大小不能超过 1MB!'))
      }
      return isLIC && isLt1M
    },
    close () {
      this.$refs.upload.clearFiles()
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less">
.licenceDialogContent {
  width: 360px;
  margin: 0 auto;
}
.no-anth {
  margin-top: 16px;
}
</style>
